<template>
  <div id="richText">
    <div id="wnav">

      <input type="text" class="wfinput1" placeholder="输入文章标题..." v-model="title" />
      <div class="wfc">草稿箱</div>

      <el-button type="text" @click="dialogVisible = true" class="wfbtn">发布</el-button>

      <el-dialog center
          title="发布文章"
          :visible.sync="dialogVisible"
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          width="500px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="分类">
            <div>
              <el-radio-group v-model="form.radio1" size="small">
                <el-radio-button label="前端"></el-radio-button>
                <el-radio-button label="后端"></el-radio-button>
                <el-radio-button label="Python"></el-radio-button>
                <el-radio-button label="人工智能"></el-radio-button>
                <el-radio-button label="Android"></el-radio-button>
              </el-radio-group>
            </div>
          </el-form-item>
<<<<<<< HEAD

=======
=======
          width="30%">

        <el-form ref="form" :model="form" label-width="80px">
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          <el-form-item label="标签">
            <el-select
                v-model="form.tag"
                clearable
                multiple
                filterable allow-create
                default-first-option
                placeholder="输入文本回车可自定义标签"
                style="width:90%">
              <el-option v-for="item in labels" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章封面">
            <el-upload
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
                action="#"
                list-type="picture-card"
                :on-remove="handleRemove"
                :auto-upload="true"
                :on-success="handleAvatarSuccess"
                :http-request="imgUpload"
                :multiple="false"
                :limit="1">
              <i class="el-icon-plus"></i>
<<<<<<< HEAD

=======
=======
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :multiple="false"
                :http-request="imgUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
            </el-upload>
          </el-form-item>
          <el-form-item label="编辑摘要">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
<<<<<<< HEAD
          <el-button @click="dialogVisible1 = false">取 消</el-button>
=======
<<<<<<< HEAD
          <el-button @click="dialogVisible1 = false">取 消</el-button>
=======
          <el-button @click="dialogVisible = false">取 消</el-button>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          <el-button type="primary" @click="tijiao">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <mavon-editor
        v-model="value"
        :ishljs="false"
        @change = changeEvent
        code-style="ocean"
        class="richText"/>
  </div>
</template>
<script>
import {allUse} from "../requests/apis";
export default {
  name:"richText",
  data() {
    return {
      dialogVisible: false,
<<<<<<< HEAD
      dialogVisible1:false,
=======
<<<<<<< HEAD
      dialogVisible1:false,
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      title:'',
      imgfile:null,
      imgurl:'',
      form: {
        tag: [],
        type: [],
        desc: "",
<<<<<<< HEAD
        radio1:''

=======
<<<<<<< HEAD
        radio1:''
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      },
      imageUrl: "",
      value:"",
      renderedHtml:'',
      labels:[
        {label:'前端'},
        {label:'后端'},
        {label:'日常'},
        {label:'面试'},
        {label:'工具'}
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      ],
      dialogImageUrl: '',
      disabled: false
    };
  },
  methods: {
    handleAvatarSuccess(res,file){
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    imgUpload(file){
      this.imgfile = file.file
    },
    handleRemove(file) {
      console.log(file)
<<<<<<< HEAD

=======
=======
      ]
    };
  },
  methods: {
    imgUpload(val){
      this.imgfile = val.file
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    },
    tijiao() {
      let formData = new FormData()
      formData.append('img',this.imgfile)
      allUse('/api/savePic','post', formData)
          .then(res=>{
<<<<<<< HEAD
            console.log(res)

=======
<<<<<<< HEAD
            console.log(res)
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
            if(res.data.code===2000){
              allUse('/api/addModifyArticle','post',{
                info:this.renderedHtml,
                title:this.title,
                token: this.$getSession().token,
                tags_name:this.form.tag,
                type:1,
                pic:'http://api_devss.wanxikeji.cn/'+res.data.data,
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
                describe:this.form.desc,
                article_type:this.form.radio1
              }).then((res) => {
                if(res.data.code===2000){
                  this.$message({
                    type:'success',
                    message:'上传成功'
                  })
                  this.$router.push('/')
                }
<<<<<<< HEAD

=======
=======
                describe:this.form.desc
              }).then((res) => {
                console.log(res);
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
              });
            }else {
              this.$message({
                type:'error',
                message:'由于未知原因图片上传失败了'
              })
            }
          })
    },
    changeEvent(value,render){
<<<<<<< HEAD
=======
<<<<<<< HEAD
=======
      console.log(value)
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      this.renderedHtml = render
    }
  },
};
</script>

<style>
#wnav {
  display: flex;
}
.wfinput1 {
  margin-left: 20px;
  width: 928px;
  height: 63px;
  border: none;
  outline: none;
  font-size: 30px;
}
.wfc {
  width: 76px;
  min-width: 76px;
  height: 32px;
  border: 1px solid rgb(29, 125, 250);
  color: rgb(29, 125, 250);
  border-radius: 2px;
  line-height: 32px;
  margin-left: 645px;
  margin-top: 10px;
  text-align: center;
}
.wfbtn {
  width: 72px;
  min-width: 72px;
  text-align: center;
  line-height: 0;
  height: 34px;
  background-color: rgb(29, 125, 250);
  border: 1px solid rgb(29, 125, 250);
  border-radius: 2px;
  margin-top: 10px;
  margin-left: 20px;
  color: white;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80%;
  height: 80%;
  display: block;
}
.richText{
  height: 90vh;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 15px;
}
</style>
